<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>

    <div id="app">
       
        <input type="text" placeholder="请输入姓名" v-model="userInfo.name"> 
        <input type="text" placeholder="请输入工资" v-model.number="userInfo.money">
        <button v-on:click="addData">添加</button>

        <table cellpadding="10" border="2">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>工资</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in people" :key="index">
                    <td>{{index+1}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.money}}</td>
                </tr>
            </tbody>
        </table>
        <h2>总工资为：{{setData}}</h2>
    </div>
    <!-- v-show 是控制显示与隐藏 主要通过 css display: none; 来进行隐藏的 -->

    <script>
        let vm = new Vue({
            // 数据层
            el: "#app", //选择器
            data: {  //存放数据 存放变量
               people:[
                {
                    name:"张三",
                    money:3000
                },
                {
                    name:"李四",
                    money:4000
                },
               ],
               userInfo:{
                name:'',
                money:''
               }
            },
            computed:{
                setData(){
                     let sum = 0
                    for(let i = 0;i<this.people.length;i++){
                         sum += this.people[i].money
                    }
                    console.log(sum,'sum')
                    return sum
                }
            },
            methods: { //用来定义方法的地方
                addData(){
                    // console.log(this.userInfo)
                    this.people.push(this.userInfo)
                }
            }
        })



    </script>



</body>

</html>